<template>
  <div>
    <!--  地图-->
    <div id="container" style="height: 500px;width:500px;background:white;"></div>
    <div class="gradientVessel">
      <div class="gradient"></div>
      <div class="gradientNum">
        <div class="numLeft">0</div>
        <div class="numRight">{{Nums(dataAll)}}</div>
      </div>
    </div>
  </div>
</template>
<script>
import cookie from '../../cookien'
export default {
  name: 'China',
  data () {
    return {
      data: [
        '北京省', '天津省',
        '上海省', '重庆省',
        '河北省', '河南省',
        '云南省', '辽宁省',
        '黑龙江省', '湖南省',
        '安徽省', '山东省',
        '新疆省', '江苏省',
        '浙江省', '江西省',
        '湖北省', '广西省',
        '甘肃省', '山西省',
        '内蒙古省', '陕西省',
        '吉林省', '福建省',
        '贵州省', '广东省',
        '青海省', '西藏省',
        '四川省', '宁夏省',
        '海南省', '台湾省',
        '香港省', '澳门省'
      ],
      dataMap: [
        { name: '北京', num: 0, itemStyle: { normal: { areaColor: 'rgba(222, 149, 38,.1)', label: { show: false } } } }, { name: '天津', num: 0, itemStyle: { normal: { areaColor: 'rgba(222, 149, 38,.1)', label: { show: false } } } },
        { name: '上海', num: 0, itemStyle: { normal: { areaColor: 'rgba(222, 149, 38,.1)', label: { show: false } } } }, { name: '重庆', num: 0, itemStyle: { normal: { areaColor: 'rgba(222, 149, 38,.1)', label: { show: false } } } },
        { name: '河北', num: 0, itemStyle: { normal: { areaColor: 'rgba(222, 149, 38,.1)', label: { show: false } } } }, { name: '河南', num: 0, itemStyle: { normal: { areaColor: 'rgba(222, 149, 38,.1)', label: { show: false } } } },
        { name: '云南', num: 0, itemStyle: { normal: { areaColor: 'rgba(222, 149, 38,.1)', label: { show: false } } } }, { name: '辽宁', num: 0, itemStyle: { normal: { areaColor: 'rgba(222, 149, 38,.1)', label: { show: false } } } },
        { name: '黑龙江', num: 0, itemStyle: { normal: { areaColor: 'rgba(222, 149, 38,.1)', label: { show: false } } } }, { name: '湖南', num: 0, itemStyle: { normal: { areaColor: 'rgba(222, 149, 38,.1)', label: { show: false } } } },
        { name: '安徽', num: 0, itemStyle: { normal: { areaColor: 'rgba(222, 149, 38,.1)', label: { show: false } } } }, { name: '山东', num: 0, itemStyle: { normal: { areaColor: 'rgba(222, 149, 38,.1)', label: { show: false } } } },
        { name: '新疆', num: 0, itemStyle: { normal: { areaColor: 'rgba(222, 149, 38,.1)', label: { show: false } } } }, { name: '江苏', num: 0, itemStyle: { normal: { areaColor: 'rgba(222, 149, 38,.1)', label: { show: false } } } },
        { name: '浙江', num: 0, itemStyle: { normal: { areaColor: 'rgba(222, 149, 38,.1)', label: { show: false } } } }, { name: '江西', num: 0, itemStyle: { normal: { areaColor: 'rgba(222, 149, 38,.1)', label: { show: false } } } },
        { name: '湖北', num: 0, itemStyle: { normal: { areaColor: 'rgba(222, 149, 38,.1)', label: { show: false } } } }, { name: '广西', num: 0, itemStyle: { normal: { areaColor: 'rgba(222, 149, 38,.1)', label: { show: false } } } },
        { name: '甘肃', num: 0, itemStyle: { normal: { areaColor: 'rgba(222, 149, 38,.1)', label: { show: false } } } }, { name: '山西', num: 0, itemStyle: { normal: { areaColor: 'rgba(222, 149, 38,.1)', label: { show: false } } } },
        { name: '内蒙古', num: 0, itemStyle: { normal: { areaColor: 'rgba(222, 149, 38,.1)', label: { show: false } } } }, { name: '陕西', num: 0, itemStyle: { normal: { areaColor: 'rgba(222, 149, 38,.1)', label: { show: false } } } },
        { name: '吉林', num: 0, itemStyle: { normal: { areaColor: 'rgba(222, 149, 38,.1)', label: { show: false } } } }, { name: '福建', num: 0, itemStyle: { normal: { areaColor: 'rgba(222, 149, 38,.1)', label: { show: false } } } },
        { name: '贵州', num: 0, itemStyle: { normal: { areaColor: 'rgba(222, 149, 38,.1)', label: { show: false } } } }, { name: '广东', num: 0, itemStyle: { normal: { areaColor: 'rgba(222, 149, 38,.1)', label: { show: false } } } },
        { name: '青海', num: 0, itemStyle: { normal: { areaColor: 'rgba(222, 149, 38,.1)', label: { show: false } } } }, { name: '西藏', num: 0, itemStyle: { normal: { areaColor: 'rgba(222, 149, 38,.1)', label: { show: false } } } },
        { name: '四川', num: 0, itemStyle: { normal: { areaColor: 'rgba(222, 149, 38,.1)', label: { show: false } } } }, { name: '宁夏', num: 0, itemStyle: { normal: { areaColor: 'rgba(222, 149, 38,.1)', label: { show: false } } } },
        { name: '海南', num: 0, itemStyle: { normal: { areaColor: 'rgba(222, 149, 38,.1)', label: { show: false } } } }, { name: '台湾', num: 0, itemStyle: { normal: { areaColor: 'rgba(222, 149, 38,.1)', label: { show: false } } } },
        { name: '香港', num: 0, itemStyle: { normal: { areaColor: 'rgba(222, 149, 38,.1)', label: { show: false } } } }, { name: '澳门', num: 0, itemStyle: { normal: { areaColor: 'rgba(222, 149, 38,.1)', label: { show: false } } } }
      ],
      dataAll: 0
    }
  },
  computed: {
    Nums (value) {
      return (value) => {
        if (value >= 100000000) {
          value = Math.round(value / 10000000) / 10 + '亿'
        } else if (value >= 10000000) {
          value = Math.round(value / 1000000) / 10 + 'kw'
        } else if (value >= 10000) {
          value = Math.round(value / 1000) / 10 + 'w'
        } else if (value >= 1000) {
          value = Math.round(value / 100) / 10 + 'k'
        }
        return value
      }
    }
  },
  mounted () {
    this.alls()
  },
  methods: {
    async  alls () {
      await this.finish()
      await this.area()
      await this.china()
    },
    finish () {
      return new Promise((resolve, reject) => {
        this.$axios({
          url: '/Menu/Admin/getFinish',
          headers: {
            token: cookie.getToken()
          }
        }).then(data => {
          this.dataAll = data.data.object
          resolve(data.data.object)
        }).catch(err => {
          console.log(err)
          reject(err)
        })
      })
    },
    area () {
      return new Promise((resolve, reject) => {
        this.$axios({
          url: '/Menu/Admin/regionalPurchase',
          headers: {
            token: cookie.getToken()
          }
        }).then(data => {
          for (var i = 0; i < data.data.object.length; i++) {
            // console.table(data.data.object)
            this.dataMap[this.data.indexOf(data.data.object[i].province)].num = data.data.object[i].num
            this.dataMap[this.data.indexOf(data.data.object[i].province)].itemStyle.normal.areaColor = 'rgba(222,194,38,' + parseFloat(data.data.object[i].num) / this.dataAll * 0.9 + ')'
          }
          resolve(true)
        }).catch(err => {
          console.log(err)
          reject(err)
        })
      })
    },
    china () {
      return new Promise((resolve, reject) => {
        // 全国省份列表
        var dataMap = this.dataMap
        // 绘制图表，准备数据
        var option = {
          tooltip: {
            formatter: function (params) {
              var info = '<p style="font-size:18px">' + params.name + '</p><p style="font-size:14px">' + params.data.num + '人</p>'
              return info
            },
            backgroundColor: '#ff7f50', // 提示标签背景颜色
            textStyle: { color: '#fff' } // 提示标签字体颜色
          },
          series: [
            {
              name: '中国',
              type: 'map',
              mapType: 'china',
              selectedMode: 'multiple',
              label: {
                normal: {
                  show: false// 显示省份标签
                  // textStyle:{color:"#c71585"}//省份标签字体颜色
                },
                emphasis: {
                  show: true, // 对应的鼠标悬浮效果
                  textStyle: { color: '#ffffff' }
                }
              },
              itemStyle: {
                normal: {
                  borderWidth: 0.5, // 区域边框宽度
                  borderColor: '#fff', // 区域边框颜色
                  areaColor: '#ffefd5'// 区域颜色
                },
                emphasis: {
                  borderWidth: 0.5,
                  // areaColor: "#ffdead",
                  areaColor: 'rgba(222, 149, 38,.1)',
                  shadowColor: 'rgba(0,0,0,.5)'
                }
              },
              data: dataMap
            }
          ]
        }
        // 初始化echarts实例
        // eslint-disable-next-line no-undef
        var myChart = echarts.init(document.getElementById('container'))
        // 使用制定的配置项和数据显示图表
        myChart.setOption(option)
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .gradientVessel{
    width: 100%;
    position: absolute;
    bottom: 40px;
    left: 0;
    .gradient{
      width:200px;
      height:25px;
      background-image:linear-gradient(to right, rgba(222, 149, 38,.1),rgba(222, 149, 38,.9));
      margin: 0 auto;
    }
    .gradientNum{
      margin: 0 auto;
      width: 210px;
      height: 25px;
      line-height: 25px;
      color: #8c8c8c;
      .numLeft{
        float: left;
        height: 100%;
      }
      .numRight{
        float: right;
        height: 100%;
      }
    }
  }
</style>
